<template>
	<div>
		<mt-header title="上架商品">
			<router-link to="/" slot="left">
				<mt-button icon="back"></mt-button>
				<!-- <mt-button @click="handleClose">关闭</mt-button> -->
			</router-link>
			<mt-button icon="more" slot="right"></mt-button>
		</mt-header>

		<div class="qb">
			<van-tree-select  :items="items" :main-active-index.sync="active" :height="600">
				<template slot="content" class="gao" :height='600'>
					<div v-if="active === 1" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked1" />
						</p>
					</div>
					<br>
					<div v-if="active === 1" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked2" />
						</p>
					</div>
					<br>
					<div v-if="active === 1" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked3" />
						</p>
					</div>
					<br>
					<div v-if="active === 1" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked4" />
						</p>
					</div>
					<br>
					<div v-if="active === 1" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked5" />
						</p>
					</div>
					<br>
					
					
					<div v-if="active === 0" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked1" />
						</p>
					</div>
					<br>
					<div v-if="active === 0" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked2" />
						</p>
					</div>
					<br>
					<div v-if="active === 0" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked3" />
						</p>
					</div>
					<br>
					<div v-if="active === 0" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked4" />
						</p>
					</div>
					<br>
					<div v-if="active === 0" class="dingw">
						<img src="../img/sj1.png" alt="">
						<span class="ting">热咖啡</span>
						<input type="text" value="30¥">
						<p class="kaig">
						确认上价商品&nbsp;&nbsp;&nbsp;&nbsp;	<van-switch v-model="checked5" />
						</p>
					</div>
					<br>
					
					
					
				</template>
			</van-tree-select>
		</div>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
			checked1:false,
			checked2:false,
			checked3:false,
			checked4:false,
			checked5:false,
			
			checked: true,
	      active: 1,
	      items: [{ text: '店家推荐' }, { text: '咖啡' }, { text: '甜点' }, { text: '茶饮' }]
	    }
	  }
	}
</script>

<style scoped lang="less">
	.qb{
		height: 600px;
	}
	.mint-header {
		background: #6F81ED 100%;
	}
	.van-tree-select__content{
		height: 300px;
	}

	.van-tree-select {
		margin-top: 25px;
	}
	.ting{
		margin-left: 15px;
	}
	img{
		vertical-align: text-top;
	}
	
	.dingw{
		position: relative;
		input{
			position: absolute;
			top: 25px;
			left:115px;
			width: 55px;
			height: 15px;
			border: 1px solid #F7F7F7;
			// margin-top: 15px;
			.gao{
				// overflow-y: inherit;
			}
		}
	}
</style>
